---
title: Common Issues
---

This document collects tips and tricks for debugging common issues. If you'd like to see a workaround documented here, please [submit it to our GitHub issues](https://github.com/onejs/one).

### General errors when server rendering

If you see an error while rendering from the server, it can often be hard to diagnose. There's a few ways to debug it.

First, we've found turning off Vite external dependencies entirely will often help, what it does is make Vite use esbuild and apply CommonJS transforms for compatibility, transforming all of them into your `.vite` directory. You can enable it like so:

```tsx fileName=vite.config.ts
{
  ssr: {
    noExternal: true
  }
}
```

The reason we don't turn this on by default it is can cause other issues, namely if a node module relies on, say, __dirname, or __filename, then when they are transformed into the `.vite` folder these paths will change. Another reason we don't turn it on by default is that it can slow things down.

If you do find the individual module that is causing an issue, you can also configure it quickly using the `deps` option in the [One Vite plugin configuration](/docs/configuration#deps).

### Uncaught SyntaxError: The requested module ... does not provide an export named 'default'

In general you want to add any dependency like this to `optimizeDeps.exclude`. But One has some default optimizeDeps options we add that may prevent that.

You can use `fixDependencies` in your `vite.config.ts`:

```tsx
import { one } from 'one/vite'

export default {
  plugins: [
    one({
      fixDependencies: {
        'erroring-dep': 'exclude'
      }
    })
  ]
}
```

### `require` is not defined

The first thing you'll want to try is optimizing this dependency using the Vite interop transforms:

```tsx fileName=vite.config.ts
import one from 'one/vite'

{
  plugins: [
    one({
      deps: {
        '@bad/dependency': 'interop',
      }
    })
  ]
}
```

You can also try using one of the commonjs plugins, either `vite-require` or `vite-plugin-commonjs`.

### Common React Native package issues

When using bundlers like Vite, Rollup, or esbuild, developers often encounter issues with React Native and Expo packages originally designed to work only for Metro. Metro’s tolerant nature allows certain practices that other bundlers may not support, such as:

* Including Flow types in distributed `.js` files.
* Including JSX syntax in `.js` files instead of `.jsx`.
* Releasing packages as ESM-only without proper declarations in `package.json` (e.g., missing `"type": "module"`) or appropriate `.mjs` extensions.
* Omitting import path extensions in distributed ESM, which can [prevent Node.js from running those modules correctly](https://nodejs.org/docs/latest-v20.x/api/esm.html#mandatory-file-extensions), and break SSR.

These issues can break builds and require specific handling to make the packages compatible with non-Metro bundlers. Related error messages you might encounter includes:

* `The JSX syntax extension is not currently enabled.`
* `The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able to parse JSX syntax.`
* `SWC failed to transform file` following with a syntax error parsing something like `import type`.

To workaround these issues, you can use the package patching feature of One to fix the packages that are causing problems. Here's an example:

```tsx fileName=vite.config.ts
export default {
  plugins: [
    one({
      // ...
      deps: {
        'react-native-vector-icons': {
          '**/*.js': [
            'jsx', // Transpile JSX in .js files
            'flow', // Remove flow types
          ],
        },
      },
    }),
  ],
}
```

For more details, see the [`deps` section in Configuration](/docs/configuration#deps).

<Notice>
  We encourage you to [open an issue](https://github.com/onejs/one/issues/new) on our GitHub repository if you encounter similar issues, as your feedback helps us improve One's compatibility with React Native packages.

  If you've resolved an issue with a patch, we'd love for you to share your patch configuration. Alternatively, feel free to reach out, and we'll gladly assist in finding a solution to get things working.
</Notice>

<Notice>
  If appropriate, it's also nice to reach out to the maintainers of those packages to help improve their compatibility with non-Metro bundlers.
</Notice>

### Making fetch() requests on native platforms

When using `fetch()` on native platforms (iOS/Android), relative URLs behave differently than on web. You need to use the `ONE_SERVER_URL` environment variable to construct absolute URLs for API calls.

#### URL behavior by platform:

**Web** – works as expected:
- Relative URL (`/api/hello`) ✅
- localhost URL (`http://localhost:8081/api/hello`) ✅
- Local IP URL (`http://192.168.0.[x]:8081/api/hello`) ✅

**iOS Simulator**:
- Relative URL (`/api/hello`) ❌ – Network request failed
- localhost URL (`http://localhost:8081/api/hello`) ✅
- Local IP URL (`http://192.168.0.[x]:8081/api/hello`) ✅

**Real iOS Device**:
- Relative URL (`/api/hello`) ❌ – Network request failed
- localhost URL (`http://localhost:8081/api/hello`) ❌ – Network request failed
- Local IP URL (`http://192.168.0.[x]:8081/api/hello`) ✅

#### Solution

Use the `ONE_SERVER_URL` environment variable to construct absolute URLs:

```tsx
// ❌ Won't work on native
const response = await fetch('/api/hello')

// ✅ Works everywhere
const response = await fetch(`${process.env.ONE_SERVER_URL}/api/hello`)
```

One automatically sets `ONE_SERVER_URL` in development mode to the current running server URL (e.g., `http://0.0.0.0:8081`). For production builds, you'll need to set this environment variable yourself.

### Application has not been registered

One calls AppRegistry.registerComponent for you to set up your React Native entry component.

If you React Native app is erroring on startup, you need to make sure your One Vite plugin is configured to
register the component:

```tsx fileName=vite.config.ts
import { one } from 'one/vite'

export default {
  plugins: [
    one({
      native: {
        // make sure this matches the key you use to build your native app
        key: 'my-app'
      }
    })
  ]
}
```
